<script setup>
import { reactive, ref, watch } from 'vue'
import { BadgeCheckIcon } from '@heroicons/vue/solid'

defineProps({
  msg: String
})

const count = ref(0)
const msg2 = ref('sdsd')
var name = 34

const count2 = reactive(12)

// function updateCount() {
//   count2 = count2 + 2
// }

function myName() {
  return "dsdsd"
}

watch(count, (value)=> {
  console.log('new value', value)
})

</script>

<template>


<button class="btn btn-primary">neutral</button> 

  <BadgeCheckIcon class="h-10 w-10"></BadgeCheckIcon>
  <h1>{{ msg }}--{{count2}}</h1>
  <h1>{{ myName()  }}</h1>

  <h1 class="text-3xl font-bold underline text-teal-100" style="left: 10px;">
    Hello world!sdsds
  </h1>

   <o-button >Click Me</o-button>

  <p>
    Recommended IDE setup:
    <a href="https://code.visualstudio.com/" target="_blank">VSCode</a>
    +
    <a href="https://github.com/johnsoncodehk/volar" target="_blank">Volar</a>
  </p>

  <p>
    <a href="https://vitejs.dev/guide/features.html" target="_blank">
      Vite Documentation
    </a>
    |
    <a href="https://v3.vuejs.org/" target="_blank">Vue 3 Documentation</a>
  </p>

  <button type="button" @click="count++">count sdsdis: {{ count }}</button>
  <p>
    Edit
    <code>components/HelloWorld.vue</code> to test hot module replacement.
  </p>
</template>

<style scoped>
a {
  color: #42b983;
}
</style>
